<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DynamicListItem</title>
<style>
    #b{
        border-color: #50afeb;
        border: groove;
    }

</style>

</head>
<body>

<ul id="a">
    <li>传智播客</li>
    <li>黑马程序员</li>
    <li>博学谷</li>
</ul>

<input type="text" id="b" />
<input type="button" value="动态生成列表" onclick="add()"/>

<script>
    function add() {

        let value = document.getElementById("b").value;

        document.getElementById("b").value = "";

        let li = document.createElement("li");

        li.innerText = value;

        let ul = document.getElementById("a");

        ul.appendChild(li)
    }
</script>
</body>
</html>